<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item>
            <router-link to="/index">商品管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/users">用户管理</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/shop">结算中心</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/transaction">订单管理</router-link>
          </el-menu-item>
        </el-menu>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>

    </el-container>
    <!--    ：data后面是开启简单的姓名过滤-->
    <!--    :height= 400px 设置表格高度，多出来的会自动设置滚动条-->
    <el-table :height="400"
              :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              max-height="500"
              style="width: 100%">
      <el-table-column
        label="编号"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!--      prop 绑定一列中要展示的值,这个值是后台传来json数据的值-->
      <el-table-column label="生日" prop="bir">
      </el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="" align="right">
        <!--        放入搜索框-->
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="请输入姓名关键字搜索"/>
        </template>

        <template slot-scope="scope">
          <!--          scope.$index→拿到每一行的index-->

          <!--          scope.$row→拿到每一行的数据-->
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row);xiugai=true;tijiao=false">编辑
          </el-button>
          <!--          确认删除的气泡  点击确认的时候触发删除事件-->
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除当前用户吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button slot="reference"
                       size="mini"
                       type="danger"
                       :plain="true"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <!--    分页组件 -->
    <!--    prev, pager, next, sizes,total 分别对应上一页，当前页，下一页，每页显示的数量，总数据数
           :page-size="" 要和 :page-sizes 配合使用
           @current-change="findPage"  返回当前页
           @size-change="findSize"  返回每一页要显示的数量
    -->
<!--    <el-pagination-->
<!--      @current-change="findPage"-->
<!--      @size-change="findSize"-->
<!--      background-->
<!--      layout="prev, pager, next, sizes,total,jumper"-->
<!--      prev-text="上一页"-->
<!--      next-text="下一页"-->
<!--      :page-sizes="[2, 4, 6, 8, 10]"-->
<!--      :page-size="size"-->
<!--      :current-page="pageNow"-->
<!--      :total="total">-->
<!--    </el-pagination>-->

    <div style="margin: 20px">
      <!--    一个添加按钮-->
      <el-divider></el-divider>
      <el-button type="success" size="mini" v-on:click="reset;tijiao=true;xiugai=false">添加</el-button>

      <el-button type="success" size="mini" v-on:click="findAll">刷新</el-button>
    </div>

    <!--    展示添加面板-->
    <transition name="el-fade-in-linear">
      <div v-show="show" class="transition-box">
        <!--        label-suffix ：表单标签前缀  ref="userForm" 进行表单验证时传过去验证的表单，
        注意是在提交表单时传递给按钮的@click来作为提交的参数-->
        <el-form ref="userForm" :model="form" label-width="80px"
                 label-suffix=":"
                 :hide-required-asterisk="false"
                 :rules='rules'
        >
          <el-form-item label="编号" prop="id">
            <el-input v-model="form.id"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="bir">
            <el-col :span="11">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.bir"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input type="textarea" v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveOne('userForm')" v-show="tijiao">提交</el-button>
            <el-button type="primary" @click="updateOne('userForm')" v-show="xiugai">修改</el-button>
            <el-button v-on:click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      tijiao: true,
      xiugai: false,
      total: 0,
      tableData: [],
      search: '',
      show: true,
      form: {
        id: '',
        name: '',
        bir: '',
        sex: '男',
        address: ''
      },
      msg: '',
      status: Boolean,
      rules: {
        name: [
          // blur失去焦点触发
          {required: true, message: '请输入用户姓名！', trigger: 'blur', min: 2, max: 10}
        ],
        bir: [
          // blur失去焦点触发
          {required: true, message: '请选择用户生日！', trigger: 'blur'}
        ],
        address: [
          // blur失去焦点触发
          {required: true, message: '请选择用户地址！', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 清空表单
    reset () {
      this.form = {sex: '男'}
    },
    // 删除后提示信息
    openVn () {
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, '提示:'),
          h('i', {style: 'color: teal'}, this.msg)
        ]),
        type: 'success'
      })
    },
    handleEdit (index, row) {
      this.isShow()
      this.form = row // 点击编辑按钮，将数据返回到表单中
      console.log(index, row)
    },
    handleDelete (index, row) {
      // 使用路径加参数的形式get 来删除
      this.axios.get('http://localhost:8989/user/deleteOneById?id=' + row.id).then(res => {
        this.result = res.data
        this.msg = this.result.msg
        // console.log(this.result.msg)
        // 删除后提示消息
        this.openVn()
        this.findAll()
      })
    },
    // 这个userForm是传进来进行表单验证的
    saveOne (userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          // 如果验证通过
          // 发送一个axios请求，使用post，把form表单传过去
          this.axios.post('http://localhost:8989/user/saveOne', this.form).then(res => {
            // 接受到后台传来的json数据
            this.result = res.data
            // 提交后清空表单
            if (this.status === true) {
              this.reset()
            }
            // 刷新表单
            this.findAll()

            // 在提交内容后弹出窗口提示
            this.$alert(this.result.msg, '提示信息', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`
                })
              }
            })
          })
        } else {
          this.$message.error('输入的数据不合法')
        }
      })
    },
    updateOne (userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          // 如果验证通过
          // 发送一个axios请求，使用post，把form表单传过去
          this.axios.post('http://localhost:8989/user/updateOne', this.form).then(res => {
            // 接受到后台传来的json数据
            this.result = res.data
            // 提交后清空表单
            if (this.status === true) {
              this.reset()
            }
            // 刷新表单
            this.findAll()

            // 在提交内容后弹出窗口提示
            this.$alert(this.result.msg, '提示信息', {
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`
                })
              }
            })
          })
        } else {
          this.$message.error('输入的数据不合法')
        }
      })
    },
    findAll () {
      // 获取后端传过来的json数据，通过response来接受数据赋值给tableData
      this.axios.get('http://localhost:8989/user/findAll').then(res => {
        console.log(res.data)
        this.tableData = res.data
      })
    },
    // 按下编辑按钮 控制显示添加面板，
    isShow () {
      this.show = true
    }
  },
  created () {
    // 获取后端传过来的json数据，通过response来接受数据赋值给tableData
    this.findAll()
  }

}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  /*background-color: #409EFF;*/
  text-align: left;
  /*color: #fff;*/
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
